<template>
  <van-tabbar
    v-model="currentPath"
    active-color="#ffc456"
    style="font-weight: 600;"
    inactive-color="#999999"
    placeholder
    safe-area-inset-bottom
    route
  >
    <van-tabbar-item
      v-for="item in tabbarList"
      :key="item.to"
      :icon="item.icon"
      :name="item.name"
      :to="item.to"
      replace
      >{{ item.text }}</van-tabbar-item
    >
  </van-tabbar>
</template>
<script setup>
import { ref } from 'vue'
const currentPath = ref('/home')
const tabbarList = ref([
  {
    text: '首页',
    name: '/home',
    to: '/home',
    icon: 'wap-home-o'
  },
  {
    text: '打卡',
    name: '/clock',
    to: '/clock',
    icon: 'sign'
  },
  {
    text: '积分商城',
    name: '/integralMall',
    to: '/integralMall',
    icon: 'shop-collect-o'
  },
  {
    text: '个人中心',
    name: '/personalCenter',
    to: '/personalCenter',
    icon: 'contact'
  }
])

</script>

<style lang="scss" scoped></style>
